{%- if section.settings.image != blank -%}
  {%- style -%}
    .split-image__image-{{ section.id }} .adapt-to-image::before {
      padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
      content: '';
      display: block;
    }
  {%- endstyle -%}
{%- endif -%}

{%- liquid
  case section.settings.desktop_layout
    when 'text_first'
      assign desktop_layout = 'flex-sm-row-reverse'
      assign text_fist = true
    when 'image_first'
      assign text_fist = false
      assign desktop_layout = ''
    else
      assign desktop_layout = ''
  endcase
%}

<div class="as-station-image-with-text" data-id="{{ section.id }}">
  <div>
    {% comment %} 标题 {% endcomment %}
    {% if section.settings.heading != blank %}
      <div class="container section-padding">
        <div class="d-flex justify-content-center">
          <h2 class="display-3 text-center fw-bold mb-0 section-heading">{{ section.settings.heading }}</h2>
        </div>
      </div>
    {% endif %}

    <div class="bg-gray-100 d-lg-flex justify-content-lg-center overflow-hidden position-relative">
      <div class="container-topic  px-0">
        <div class="as-trigger-1"></div>
        <div class="row {{ desktop_layout }} gx-0">
          <div class="col-12 col-lg-6 split-image__image-{{ section.id }}">
            <div class="adapt-to-image h-100 position-relative overflow-hidden">
              {% if section.settings.image != blank %}
                <img
                  class="object-fit-cover position-absolute as-parallax-pic-{{ section.id }}"
                  style="width:120%;top:60%;left:50%;transform: translate(-50%, -50%);"
                  loading="lazy"
                  alt="{{ section.settings.image.alt | escape }}"
                  srcset="
                    {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                    {%- if section.settings.image.width >= 480 -%}{{ section.settings.image | img_url: '480x' }} 480w,{%- endif -%}
                    {%- if section.settings.image.width >= 720 -%}{{ section.settings.image | img_url: '720x' }} 720w,{%- endif -%}
                    {%- if section.settings.image.width >= 960 -%}{{ section.settings.image | img_url: '960x' }} 960w,{%- endif -%}
                    {%- if section.settings.image.width >= 1200 -%}{{ section.settings.image | img_url: '1200x' }} 1200w,{%- endif -%}
                  "
                  src="{{ section.settings.image | img_url: '1200x' }}"
                >
              {% else %}
                <div class="img-placeholder">
                  {{ 'collection-4' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
                </div>
              {% endif %}
            </div>
          </div>
          <div class="col-12 col-lg-5"></div>
        </div>
      </div>

      <div class="container flex-center h-100 top-0 content-area">
        <div class="as-trigger-1"></div>
        {% comment %} gx-0 {% endcomment %}
        <div class="row {{ desktop_layout }} w-100">
          <div class="col-12 col-lg-7"></div>
          <div class="col-12 col-lg-5 {% if text_fist %} ps-0 {% endif %}">
            <div class="flex-center py-7 py-xxl-7 d-flex h-100 w-100 {% if text_fist %}left-text-area ps-0{% else %}right-text-area{% endif %}">
              <div class="mt-n2  flex-grow-1">
                {%- for block in section.blocks -%}
                  {%- case block.type -%}
                    {%- when 'heading' -%}
                      {%- if block.settings.heading != empty -%}
                        <h3 class="h2 fw-bold mb-0 item-title">
                          {{- block.settings.heading -}}
                        </h3>
                      {%- endif -%}
                    {%- when 'text' -%}
                      {%- if block.settings.text != blank -%}
                        <div class="h4 gray-700 mb-0 item-des fw-normal mt-md-5 mt-4 no-last-margin richtext-with-link richtext-link-default">
                          {{ block.settings.text }}
                        </div>
                      {%- endif -%}
                    {%- when 'sub_image' -%}
                      {%- if block.settings.sub_image != blank -%}
                        <div class="w-100 sub-image overflow-hidden">
                          <picture class="w-100">
                            <img
                              class="object-fit-cover w-100"
                              src="{{ block.settings.sub_image | img_url: 'master' }}"
                              alt="{{ block.settings.sub_image.alt | escape }}"
                              loading="lazy"
                            >
                          </picture>
                        </div>
                      {%- endif -%}
                  {%- endcase -%}
                {%- endfor -%}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Station Image with text",
  "class": "station-image-with-text",
  "tag": "section",
  "settings": [
    {
      "label": "Heading",
      "type": "text",
      "id": "heading",
      "default": "Anytime. Anywhere. Anything."
    },
    {
      "label": "Image",
      "type": "image_picker",
      "id": "image"
    },
    {
      "type": "select",
      "id": "desktop_layout",
      "label": "Desktop image placement",
      "options": [
        {
          "value": "image_first",
          "label": "Image first"
        },
        {
          "value": "text_first",
          "label": "Text first"
        }
      ],
      "default": "image_first"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "Heading",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Image with text",
          "label": "Heading"
        }
      ]
    },
    {
      "type": "text",
      "name": "Text",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
          "label": "Text"
        }
      ]
    },
    {
      "type": "sub_image",
      "name": "Sub image",
      "limit": 1,
      "settings": [
        {
          "type": "image_picker",
          "id": "sub_image",
          "label": "Sub-image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Station Image with text",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        }
      ]
    }
  ]
}
{% endschema %}
